<template>
	<el-row class="type">
		<el-button type="success" @click="openDialog()">新增题目</el-button>
		<el-select v-model="type" class="m-2" placeholder="选择技术类型" clearable>
			<el-option v-for="item in learnType" :key="item.id" :label="item.name" :value="item.id"></el-option>
		</el-select>
		<el-button type="primary" @click="onSearch">查询</el-button>
	</el-row>
	<el-table :data="topicList" style="width: 100%" >
		<el-table-column type="expand">
			<template #default="props">
				<div class="table-item">
					<!-- <div class="title">题目:{{ props.row.title }}</div> -->
					<div class="res">答案:{{ props.row.result }}</div>
					<div class="keyword">关键字:{{ props.row.keyword }}</div>
				</div>
			</template>
		</el-table-column>
		<!-- id`, `title`, `type`, `keyword`, `result`, `importance`, `keywordRadio -->
		<el-table-column label="id" prop="id" width='50'/>
		<el-table-column label="类型" prop="typeName"  width='100'/>
		<el-table-column label="题目" prop="title" />
		<el-table-column label="重要" prop="importance"  width='80'/>
		<el-table-column label="关键字比例" prop="keywordRadio"  width='100'/>
		<el-table-column label="操作" width='160'>
			<template #default="props" >
				<el-button type="primary" @click="openDialog(props.row)" size="small">编辑</el-button>
				<el-button type="danger" @click="onDelete(props.row.id)" size="small">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<Dialog ref="dialog" @closeDialog="onCloseDialog($event, getTopicList)" v-if="showDialog"></Dialog>

	<el-pagination
		v-model:current-page="currentPage"
		:page-size="10"
		background
		layout="prev, pager, next,"
		:total="total"
		@current-change="handleCurrentChange"
		style="margin-top:10px ;"
	/>
</template>
<script setup lang="ts">
import { getCurrentInstance, ref, nextTick } from 'vue';
import { ElInput } from 'element-plus';
import Dialog from './Dialog.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import useDialog from '@/hooks/useDialog';
const { dialog, showDialog, openDialog, onCloseDialog } = useDialog;

const inputValue = ref('');
const topicList = ref([]);
const inputVisible = ref(false);
const InputRef = ref<InstanceType<typeof ElInput>>();
// const impArr = ['一般','普通','正常','重要','很重要']
const { proxy } = getCurrentInstance();

const currentPage = ref(1);
const total = ref(500);
const type = ref('');
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`);
	currentPage.value = val;
	getTopicList();
};


import { useMainStore } from '@/store/index.js';
import { storeToRefs } from 'pinia';
const mainStore = useMainStore();
const {  learnType } = storeToRefs(mainStore);

function onSearch(){
	currentPage.value = 1
	getTopicList();
}

//获取题目数据
getTopicList();

function getTopicList() {
	proxy
		.$get('/topic', {
			page: currentPage.value,
			type:type.value
		})
		.then(res => {
			if (res.code === 200) {
				console.log(res);
				topicList.value = res.data.list;
				total.value = res.data.total;
			}
		});
}

// 删除题目
function onDelete(id) {
	ElMessageBox.confirm('是否确认删除该条面试题?', '警告!!', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy
				.$post('/topic/delete', {
					id
				})
				.then(res => {
					if (res.code === 200) {
						ElMessage({
							message: '删除成功',
							type: 'success'
						});
						getTopicList();
					}
				});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}



</script>

<style lang="less" scoped>
.type {
	& > * {
		margin: 5px;
	}
}
.table-item {
	div {
		margin: 20px;
	}
	.title {
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}
}
</style>
